@charset "utf-8";

@import "reset";

@function r($px){
    @return ($px/40)*1rem;
}
// 减半
@function half($px){
    @return ($px/2)*1px;
}

html,body{
    height: 100%;
    position: relative;
}
// 头部
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
    padding: half(48) half(22);
    box-sizing: border-box;
    .back{
        width: 59px;
        height: 26px;
        border: 2px solid #ff9344;
        line-height: 26px;
        text-align: center;
        border-radius: 25px;
        a{
            color: black;
            font-size: 21px;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .title{
        font-size: 18px;
        text-align: center;
    }
    .xingxing{
        width: 30px;
        font-size: 0;
        img{
            width: 100%;
        }
    }
}

//主体
section{
    position: absolute;
    width: r(750);
    top: half(131);
    bottom: half(160);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-left: r(24);
    padding-right: r(24);
    .mi1{
        width: 100%;
        font-size: 0;
        img{
            width: 100%;
        }
    }
    .mi2{
        width: 100%;
        height: r(120);
        line-height: r(120);
        box-sizing: border-box;
        padding-left: r(22);
        padding-right: r(22);
        .price{
            color: #ff9344;
            font-size: r(72);
        }
        .buy{
            width: r(110);
            height: r(60);
            line-height: r(60);
            border-radius: 25px;
            text-align: center;
            background-color: #ff9344;
            font-size: r(30);
            margin-top: r(30);
            a{
                color: white;
            }
        }
    }
    .mi3{
        width: 100%;
        height: r(96);
        line-height: r(96);
        box-sizing: border-box;
        padding-left: r(22);
        padding-right: r(22);
        img{
            width: r(37);
        }
        .mi3l{
            font-size: r(30);
            span{
                color: #ff9344;
            }
        }
        .mi3r{
            font-size: r(26);
            a{
                color: #8e8e8e;
            }
        }
    }
    .mi4{
        width: 94%;
        margin:0 auto;
        height: r(67);
        line-height: r(67);
        color: white;
        font-size: r(30);
        background-color: #ff9344;
        box-sizing: border-box;
        padding-left: r(22);
        padding-right: r(22);
        margin-bottom: r(18);
        a{
            color: white;
        }
    }
    .mi5{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(22);
        padding-bottom: r(20);
        font-size: 0;
        img{
            width: r(176);
        }
        .rel{
            position: relative;
            a{
                color: black;
            }
            p{
                position: absolute;
                background: rgba(182,182,182,0.5);
                font-size: r(24);
                width: 100%;
                height: r(37);
                line-height: r(37);
                text-align: center;
                top:r(88); 
            }
        }
        .detail{
            width: r(457);
            margin-left: r(26);
            .name{
                font-size: r(30);
            }
            .iconfont{
                color: #ff9344;
                font-size: r(34);
            }
            .score{
                font-size: r(26);
                color: #929292;
            }
            .range{
                font-size: r(24);
                color: #929292;
                margin-top: r(7);
            }
            .look{
                font-size: r(20);
                margin-top: r(15);
                a{
                    color: #ff9344;
                }
            }
            .button{
                width: r(110);
                height: r(58);
                line-height: r(58);
                font-size: r(30);
                background-color: #FF9344;
                text-align: center;
                border-radius: 25px;
                margin-top: r(55);
                a{
                    color: white;
                }
            }
        }
    }
   
}    


// 底部
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: r(750);
    height: half(135);
    li{
        width: 25%;
        text-align: center;
        .iconfont{
            font-size: 36px;
            color: white;
            -webkit-text-stroke: 1px #FF9344;
        }
        p{
            font-size: 13px;
            color: black;
        }
    }
} 